import React, { useState, useEffect } from "react"
import './index.css'
import { Input, Space, Table, DatePicker, Select, Button } from 'antd';
import axios from "../../../../../util/axios";
import ExportJsonExcel from 'js-export-excel';
const { Search } = Input;
const { Option } = Select;
const { RangePicker } = DatePicker;
const Headlist = () => {
    const [list, setList] = useState([])//总数据
    const selectonelist = ['全部', '待结算', '已结算', '已拒绝']//下拉框（one）数据
    const selecttwolist = ['所有订单', '待发货', '已退款', '已完成', '待团长收货', '待用户收货']//下拉框（two）数据
    //useEffect
    useEffect(
        () => {
            getlist()//调用getlist获取总数据渲染到试图
        }, []
    )
    //调用接口
    const getlist = () => {
        axios.get('/colonermanry').then(res => {
            setList(res.data.data)
        })
    }
    //表格标题
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
        },
        {
            title: '头像',
            dataIndex: 'img',
            render: text => <img src={text} alt="" />,
        },
        {
            title: '佣金获得者/姓名',
            dataIndex: 'name',
        },
        {
            title: '佣金类型',
            dataIndex: 'lei',
        },
        {
            title: '所得佣金',
            dataIndex: 'suoyong',
        },
        {
            title: '状态',
            dataIndex: 'lls',
        },
        {
            title: '结算时间',
            dataIndex: 'time',

        },
        {
            title: '当前订单状态',
            dataIndex: 'danglls',
        },
    ]
    //下拉框(one)
    function selone(value) {
        axios.get('/colonermanrysou', { params: { lls: value } }).then(res => {
            console.log(res.data.data, `${value}，筛选之后的数据`);
            setList(res.data.data)
        })
    }
    //下拉框(two)
    function seltwo(value) {
        axios.get('/colonermanrysou', { params: { danglls: value } }).then(res => {
            console.log(res.data.data, `${value}，筛选之后的数据`);
            setList(res.data.data)
        })
    }
    //搜索框
    const onSearch = (value) => {
        axios.get('/colonermanrysou', { params: { name: value } }).then(res => {
            console.log(res.data.data, `${value}，搜素之后的数据`);
            setList(res.data.data)
        })
    };
    //导出（dc）
    const dc = () => {
        //list为总数据
        //option是哪个表
        var option = {};
        //总数据
        var dataTable = [];
        if (list) {
            list.forEach((v,i)=>{
                const obj={
                    ID: list[i].id,
                    头像路径: list[i].img,
                    佣金获得者: list[i].name,
                    佣金类型: list[i].lei,
                    所得佣金: list[i].suoyong,
                    状态: list[i].lls,
                    结算时间: list[i].time,
                    当前订单状态: list[i].danglls,
                }
                dataTable.push(obj)
            })
        }
        //导出表格名
        option.fileName = '团长-佣金流水';
        option.datas = [
            {
                //数据
                sheetData: dataTable,
                //下方表名
                sheetName: 'sheet',
                //表格头部标题
                sheetHeader: ['ID', '头像路径', '佣金获得者', '佣金类型', '所得佣金', '状态', '结算时间', '当前订单状态'],
            },
        ];
        //创建excel实例存入（toExcel）
        const toExcel = new ExportJsonExcel(option);
        //导出表格（saveExcel方法）
        toExcel.saveExcel();
    }
    return (
        <div className="broder">
            {/* title */}
            <div className="broder_title">
                <div className="titleall">
                    <div className="selectone">
                        <span>佣金状态：</span>
                        <Select defaultValue="请选择" style={{ width: 120 }} onChange={selone}>
                            {
                                selectonelist.map((v, i) => {
                                    return <Option value={v} key={i}>{v}</Option>
                                })
                            }
                        </Select>
                    </div>
                    <div className="selecttwo">
                        <span>订单状态：</span>
                        <Select defaultValue="请选择" style={{ width: 120 }} onChange={seltwo}>
                            {
                                selecttwolist.map((v, i) => {
                                    return <Option value={v} key={i}>{v}</Option>
                                })
                            }
                        </Select>
                    </div>
                    <div className="inp">
                        <span className='span'>所属团长：</span>
                        <Search placeholder="请输入姓名" onSearch={onSearch} enterButton />
                    </div>
                    <div className="btn">
                        <Button type="primary" onClick={dc}>导出</Button>
                    </div>
                </div>
            </div>
            <div className="broder_table">
                {/* table */}
                <div className="tableall">
                    <Table columns={columns} dataSource={list} bordered={true} pagination={{ pageSize: 7 }} rowKey='id' />
                </div>
            </div>
        </div>
    )
}
export default Headlist
